<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <title>Metamorphosis Design Free Css Templates</title>
        <meta name="keywords" content="" />
        <meta name="description" content="" />
        <link href="styles.css" rel="stylesheet" type="text/css" media="screen" />
		<!-- Pirobox setup and styles -->
<script type="text/javascript" src="lib/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="lib/pirobox.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$().piroBox({
			my_speed: 400, //animation speed
			bg_alpha: 0.1, //background opacity
			slideShow : false, // true == slideshow on, false == slideshow off
			slideSpeed : 4, //slideshow duration in seconds(3 to 6 Recommended)
			close_all : '.piro_close,.piro_overlay'// add class .piro_overlay(with comma)if you want overlay click close piroBox

	});
});
</script>

<link href="images/style.css" rel="stylesheet" type="text/css" />


<!-- Pirobox setup and styles end-->
		
    </head>
    <body>
        <div id="top_header">
            <div id="logo">
                <p><a href="#">MyDesign</a></p>
                <small class="small_logo"><a href="#">small slogan goes here</a></small>
            </div>
            <div id="link_bar">
                <ul>
                    <li><a href="#"><img src="images/link1.png" alt="" title="img"/></a></li>
                    <li><a href="#"><img src="images/link2.png" alt="" title="img"/></a></li>
                    <li><a href="#"><img src="images/link3.png" alt="" title="img"/></a></li>
                    <li><a href="#"><img src="images/link4.png" alt="" title="img"/></a></li>
                    <li><a href="#"><img src="images/link5.png" alt="" title="img"/></a></li>
                </ul>
            </div>
            <div id="header_border_top"></div>
        </div>
        <div id="menu_bg">
            <div id="menu">
                <ul>
                    <li><a href="index.html">Home</a></li>
                    <li><a href="services.html">Services</a></li>
                    <li><a href="blog.html" class="active">Blog</a></li>
                    <li><a href="portfolio.html">Portfolio</a></li>
                    <li><a href="aboutus.html">About Us</a></li>
                    <li><a href="contactus.html">Contact Us</a></li>
                </ul>
            </div>
        </div>
        <div id="header_bottom">
            <p>Phasellus tortor metus, ullamcorper a tincidunt quis, fermentum id turpis. Pellentesque commodo, mauris quis sodales faucibus, dui lorem tincidunt purus, non egestas nibh nisi et leo. Donec feugiat tempus nibh vitae aliquam. Curabitur egestas tincidunt lorem eget faucibus. </p>
        </div>
        <div class="header_bor_bot">
            <div class="start_now"><a href="#">start now!</a></div>
        </div>

        <div id="content">
            <div id="blog_left">
                <div class="blog_box">
                    <div class="blog_bg_top"></div>
                    <div class="blog_bg">
                        <div class="blog_grad_bot">
                            <div class="blog_grad_top">
                                <div class="news">
                                    <div class="news_top">
                                        <div class="news_top_left">
                                            <p class="date_day">20</p>
                                            <p class="date_month">september</p>
                                        </div>
                                        <div class="news_top_right">
                                            <div class="news_title">
                                                <h5>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla cursus vulputate diam, ac vestibulum libero suscipit eget. </h5>
                                            </div>
                                            <div class="publ"><small class="gray">Published by:</small> <a href="#">admin</a></div>
                                            <div class="com"><a href="#">Comments: 34</a></div>
                                        </div>
                                    </div>
                                    <div class="news_text">
                                        <p>Aenean et porttitor justo. Fusce vitae velit eu est semper euismod at in nulla. Morbi vel sodales erat. Aenean sit amet rutrum eros. Maecenas dolor justo, mollis sit amet ultricies non, feugiat a diam. Mauris semper facilisis rhoncus. Sed sagittis viverra pellentesque. Nullam adipiscing aliquam enim, sit amet semper quam varius et. Integer volutpat convallis suscipit. Nulla facilisi. Curabitur egestas vehicula odio nec varius. Morbi vel consectetur nulla. Praesent </p>
                                        <img src="pic/pic-01.jpg" alt="" title="" class="img_bor" style="float: left; margin-right: 10px;"/>

                                        <a href="#"> Mauris quam ipsum, congue at adipiscing sit amet, congue ac nisi. </a><br />
                                        <p>Proin sit amet massa magna, sed ultrices diam. In fringilla euismod rhoncus. Donec venenatis aliquam euismod. Suspendisse cursus erat non tellus iaculis bibendum.</p>

                                        <a href="#">Fusce faucibus diam et quam eleifend tempor. </a>
                                        <p>Suspendisse potenti. Phasellus vulputate sagittis mi non lacinia. Vestibulum nec eros id lacus suscipit rhoncus sed nec nunc. Curabitur rutrum rutrum fringilla. Curabitur varius, nisl non faucibus sodales, tortor lectus lobortis orci, eu venenatis tellus urna in turpis.</p>
                                        <p>Aliquam dapibus, odio viverra fringilla tempus, ipsum erat egestas nisi, quis placerat tellus nunc ut dolor. Praesent risus purus, rhoncus id ultrices consequat, pulvinar ac mauris. Donec rutrum eleifend enim, non consequat sapien cursus ut. Curabitur tortor nisi, porttitor a semper ac, tempor in erat. Etiam tincidunt egestas arcu in commodo. Donec at massa ante, ut facilisis justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere </p>

                                        <div class="tegs_hr"></div>
                                        <div class="tegs_box">
                                            <div class="publ"><small class="gray">Tegs:</small> <a href="#">easy flash templates</a>, <a href="#">flash templates</a>, <a href="#">free flash templates</a>.</div>
                                            <div class="com"><a href="#">Comments: 34</a></div>
                                        </div><div style="clear: both"></div>
                                        <div class="tegs_hr"></div>
                                    </div>
                                </div>

                                <div class="news">
                                    <div class="news_top">
                                        <div class="news_top_left">
                                            <p class="date_day">12</p>
                                            <p class="date_month">september</p>
                                        </div>
                                        <div class="news_top_right">
                                            <div class="news_title">
                                                <h5>Proin sit amet massa magna, sed ultrices diam. In euismod rhoncus.</h5>
                                            </div>
                                            <div class="publ"><small class="gray">Published by:</small> <a href="#">admin</a></div>
                                            <div class="com"><a href="#">Comments: 23</a></div>
                                        </div>
                                    </div>
                                    <div class="news_text">
                                        <div class="blog_text_num"><big class="text_num">1</big></div>
                                        <a href="#">Fusce vitae velit eu est semper euismod at in nulla. </a>
                                        <p>Morbi vel sodales erat. Aenean sit amet rutrum eros. Maecenas dolor justo, mollis sit amet ultricies non, feugiat a diam. Mauris semper facilisis rhoncus. Sed sagittis viverra pellentesque. Nullam adipiscing aliquam enim, sit amet semper quam varius et.</p>
                                        <div class="blog_text_num"><big class="text_num">2</big></div>
                                        <a href="#">Fusce vitae velit eu est semper euismod at in nulla. </a>
                                        <p>Morbi vel sodales erat. Aenean sit amet rutrum eros. Maecenas dolor justo, mollis sit amet ultricies non, feugiat a diam. Mauris semper facilisis rhoncus. Sed sagittis viverra pellentesque. Nullam adipiscing aliquam enim, sit amet semper quam varius et.</p>
                                        <div class="blog_text_num"><big class="text_num">3</big></div>
                                        <a href="#">Morbi vel sodales erat. Aenean sit amet rutrum eros. Maecenas dolor justo, mollis sit amet ultricies non, feugiat a diam. </a>
                                        <p>Mauris semper facilisis rhoncus. Sed sagittis viverra pellentesque. Nullam adipiscing aliquam enim, sit amet semper quam varius et.</p>
                                        <p>Aenean et porttitor justo. Fusce vitae velit eu est semper euismod at in nulla. Morbi vel sodales erat. Aenean sit amet rutrum eros. Maecenas dolor justo, mollis sit amet ultricies non, feugiat a diam. Mauris semper facilisis rhoncus. Sed sagittis viverra pellentesque. Nullam adipiscing aliquam enim, sit amet semper quam varius et. Integer volutpat convallis suscipit. Nulla facilisi. Curabitur egestas vehicula odio nec varius. Morbi vel consectetur nulla. Praesent </p>
                                        <div class="tegs_hr"></div>
                                        <div class="tegs_box">
                                            <div class="publ"><small class="gray">Tegs:</small> <a href="#">easy flash templates</a>, <a href="#">flash templates</a>, <a href="#">free flash templates</a>.</div>
                                            <div class="com"><a href="#">Comments: 23</a></div>
                                        </div><div style="clear: both"></div>
                                        <div class="tegs_hr"></div>
                                    </div>
                                </div>



                                <div style="clear: both"></div>
                            </div>
                        </div>
                    </div>
                    <div class="blog_bg_bot"></div>
                </div>
            </div>

            <div id="blog_right">
                <h6>Categories</h6>
                <div class="blog_right_top"></div>
                <div class="blog_right_bg">
                    <ul class="ul_bot">
                        <li><a href="#">Free Fonts</a></li>
                        <li><a href="#">Free Icons</a></li>
                        <li><a href="#">Free Images</a></li>
                        <li><a href="#">Free Photoshop Brushes</a></li>
                        <li><a href="#">Free Wallpapers</a></li>
                        <li><a href="#">Free Website Templates</a></li>
                        <li><a href="#">Free Wordpress Themes</a></li>
                    </ul>
                </div>
                <div class="blog_right_bot"></div>


                <h6>Archives</h6>
                <div class="blog_right_top"></div>
                <div class="blog_right_bg">
                    <ul class="ul_bot">
                        <li><a href="#">September 2010</a></li>
                        <li><a href="#">August 2010</a></li>
                        <li><a href="#">July 2010</a></li>
                        <li><a href="#">June 2010</a></li>
                        <li><a href="#">May 2010</a></li>
                        <li><a href="#">April 2010</a></li>
                        <li><a href="#">March 2010</a></li>
                        <li><a href="#">February 2010</a></li>
                        <li><a href="#">January 2010</a></li>
                    </ul>
                </div>
                <div class="blog_right_bot"></div>


                <h6>Calendar</h6>
                <div class="blog_right_top"></div>
                <div class="blog_right_bg">
                    <div id="calendar">
                        <table summary="Calendar">
                            <caption>
						September 2010
                            </caption>
                            <thead>
                                <tr>
                                    <th abbr="Monday" scope="col" title="Monday">M</th>
                                    <th abbr="Tuesday" scope="col" title="Tuesday">T</th>
                                    <th abbr="Wednesday" scope="col" title="Wednesday">W</th>
                                    <th abbr="Thursday" scope="col" title="Thursday">T</th>
                                    <th abbr="Friday" scope="col" title="Friday">F</th>
                                    <th abbr="Saturday" scope="col" title="Saturday">S</th>
                                    <th abbr="Sunday" scope="col" title="Sunday">S</th>
                                </tr>
                            </thead>
                            <tfoot>
                                <tr>
                                    <td abbr="September" colspan="3" id="prev"><a href="#" title="View posts for September 2007">&laquo; Nov </a></td>
                                    <td>&nbsp;</td>
                                    <td colspan="3" id="next">&nbsp;</td>
                                </tr>
                            </tfoot>
                            <tbody>
                                <tr>
                                    <td><a href="#">1</a></td>
                                    <td><a href="#">2</a></td>
                                    <td><a href="#">3</a></td>
                                    <td><a href="#">4</a></td>
                                    <td><a href="#">5</a></td>
                                    <td>6</td>
                                    <td>7</td>
                                </tr>
                                <tr>
                                    <td>8</td>
                                    <td>9</td>
                                    <td>10</td>
                                    <td>11</td>
                                    <td>12</td>
                                    <td>13</td>
                                    <td>14</td>
                                </tr>
                                <tr>
                                    <td>15</td>
                                    <td>16</td>
                                    <td>17</td>
                                    <td>18</td>
                                    <td>19</td>
                                    <td>20</td>
                                    <td>21</td>
                                </tr>
                                <tr>
                                    <td>22</td>
                                    <td>23</td>
                                    <td>24</td>
                                    <td>25</td>
                                    <td>26</td>
                                    <td>27</td>
                                    <td>28</td>
                                </tr>
                                <tr>
                                    <td>29</td>
                                    <td>30</td>
                                    <td><a href="#">31</a></td>
                                    <td class="pad" colspan="4">&nbsp;</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="blog_right_bot"></div>

            </div>

            <div class="con_white_hr"></div>
            <div class="column_box">
                <div class="col1">
                    <h2>Get Free Quote</h2>
                    <div id="log">
                        <form id="form1" method="post" action="#">
                            <fieldset>
                                <label for="text1">Name: (Required) </label><br />
                                <input id="text1" type="text" name="text1" value="" alt=""/><br />
                                <label for="text2">Email Address: (Required)</label><br />
                                <input id="text2" type="text" name="text2" value="" alt=""/><br />
                                <label for="text2">Message: (Required) </label><br />
                                <textarea id="text_mess" name="text_mess" cols="0" rows="0"></textarea><br />
                                <input type="submit" id="login-submit" value="Send"/>
                            </fieldset>
                        </form>
                    </div>
                </div>
                <div class="col2">
                    <h2>Our Contact Info</h2>
                    <p class="bg_black">Vivamus dui magna, sodales eu porta tristique eget ligula. Quisque semper purus ac purus adipiscing sed iaculis turpis venenatis. Curabitur gravida eros sit amet sem euismod dignissim. </p>
                    <h2>Our Partner's Links</h2>
                    <ul class="ul_bot">
                         <li><a href="http://www.metamorphozis.com/free_templates/free_templates.php">Free Website Templates</a></li>
                                    <li><a href="http://www.metamorphozis.com/free_flash_templates/free_flash_templates.php">Free Flash Templates</a></li>
                                    <li><a href="http://www.metamorphozis.com/shop/easy_flash_templates.php">Easy Flash Templates</a></li>
         <li><a href="http://www.metamorphozis.com/website_hosting/index.php">Top Hosting Providers</a></li>
                                    <li><a href="http://www.metamorphozis.com/blog/category/free-fonts/">Free Fonts</a></li>
									<li><a href="http://www.metamorphozis.com/blog/category/freeicons/">Free Icons</a></li>
									<li><a href="http://www.metamorphozis.com/blog/category/free-photoshop-brushes/">Free Photoshop Brushes</a></li>
									<li><a href="http://www.metamorphozis.com/blog/feed/">RSS Subscribe</a></li>
                    </ul>
                </div>

                <div class="col3">
                    <h2>Recent Projects</h2>
                    <a href="images/metamorph_lighting.jpg"  class="pirobox_footer"><img class="img_bor" src="pic/pic-02.jpg" alt="" title="pic-01" /></a>
                    <a href="images/metamorph_ball.jpg"  class="pirobox_footer"><img class="img_bor" src="pic/pic-03.jpg" alt="" title="pic-01" /></a>
                </div>
            </div>
            <div class="con_white_hr"></div>
        </div>


        <div id="footer">
            <p>Copyright  2010. <a href="#">Privacy Policy</a> | <a href="#">Terms of Use</a> | <a href="http://validator.w3.org/check/referer" title="This page validates as XHTML 1.0 Transitional"><abbr title="eXtensible HyperText Markup Language">XHTML</abbr></a> | <a href="http://jigsaw.w3.org/css-validator/check/referer" title="This page validates as CSS"><abbr title="Cascading Style Sheets">CSS</abbr></a></p> 
	<!-- Please DO NOT remove the following notice --><p>Design by <a href="http://www.metamorphozis.com/" title="Flash Templates">Flash Templates</a>, coded by <a href="http://www.flashtemplatesdesign.com/" title="Free Flash Templates">Free Flash Templates</a></p><!-- end of copyright notice-->
        </div>

    </body>
</html>
